<template>
	<view>

		<!-- #ifdef APP-PLUS -->
		<div class="pageHeader" style="height: 129px;">
		<!-- #endif -->

			<!-- #ifdef H5 -->
			<div class="pageHeader" style="height: 94px;">
			<!-- #endif -->


				<uni-nav-bar background-color="#39A6FF" :border="false" @clickLeft="back" left-icon="left" color="#fff">
					<view class="headerBtn">
						<view class="box">
							<view class="item" :class="{'active' : formData.type == 1}" @click="typeChange(1)">标题检索
							</view>
							<view class="item" :class="{'active' : formData.type == 2}" @click="typeChange(2)">全文检索
							</view>
						</view>
					</view>
				</uni-nav-bar>



				<view class="searchBox">
					<input class="uni-input" confirm-type="search" @confirm="onSearch" @input="searchInput"
						placeholder="输入关键字以搜索" />
				</view>
			</div>

			<!-- #ifdef APP-PLUS -->
			<div style="height: 140px;"></div>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<div style="height: 100px;"></div>
			<!-- #endif -->



			<!-- <view class="listBox">
				<view class="item" v-for="(item, index) in dataList" :key="item.id" @click="goDetail(item)">
					<text class="text">
						<text style="color: #39A6FF;">[{{item.category}}]</text>
						<text v-html="item.title"></text>
					</text>

					<view class="icon">
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view> -->
			<view class="listBox">
				<view class="item" v-for="(item, index) in dataList" :key="item.id" @click="goDetail(item)">
					<view class="subTitle">
						<text class="tips">[{{item.category}}]</text>
						<text class="text" v-html="item.title"></text>
					</view>
					<view class="desc">
						<view style="flex: 3;" class="lineBreak">{{item.publishDept}}</view>
						<view style="flex: 3; text-align: right;">{{item.publishWordSize}}</view>
					</view>
				</view>
			</view>

			<view v-if='dataList.length == 0' class="placeText" style="padding-top: 20px;">
				暂无记录！
			</view>

			<view v-if="(total > 0) && (total < formData.pageIndex * formData.pageSize)" class="placeText">
				暂无更多!
			</view>


	</view>
</template>

<script>
	import {
		goLogin
	} from '@/utils/utils.js'
	import pageTabbar from '../../components/pageTabbar.vue'
	import {
		APIJS
	} from '../../api/api.js'
	export default {
		components: {
			pageTabbar
		},
		data() {
			return {
				// headerIndex: 1,
				dataList: [],
				formData: {
					"pageIndex": 1,
					"pageSize": 20,
					type: 1,
					searchKey: ''
				},
				total: 0,
				scrollToped: 0,
				triggered: false,
			}
		},

		onPullDownRefresh() {
			this.onRefresh().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onReachBottom() {
			this.lowerBottom()
		},

		methods: {
			typeChange(type) {
				this.formData.type = type
				this.dataList = []
				if (this.formData.searchKey) {
					this.getList()
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loginSuccess() {
				this.getList()
			},
			searchInput(val) {
				this.formData.searchKey = val.detail.value
			},
			onScroll(res) {
				// console.log(res)
				this.scrollToped = res.detail.scrollTop
			},

			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				});
			},

			onSearch() {
				this.onRefresh()
			},

			getList() {

				let vm = this
				return new Promise((reslove) => {
					APIJS.qryStandardContentList(this.formData).then((res) => {
						vm.dataList = [...vm.dataList, ...res.data]
						vm.total = res.count
						reslove()
					}).catch((e) => {
						console.log(e, 222)
						setTimeout(() => {
							goLogin('/pages/search/search')
							uni.stopPullDownRefresh();
						}, 600)

					})
				})
			},

			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 下拉加载更多
			lowerBottom() {
				// console.log('lowerBottom')
				let vm = this
				if (vm.total > vm.formData.pageIndex * vm.formData.pageSize) {
					vm.formData.pageIndex++
					vm.getList()
				} else {
					// vm.noMore = true
				}
			},
			onRefresh() {
				let vm = this
				return new Promise((reslove) => {
					if (vm.formData.searchKey) {
						vm.dataList = []
						vm.total = 0
						vm.formData.pageIndex = 1
						vm.getList().then((res) => {
							reslove()
						})
					} else {
						vm.dataList = []
						vm.formData.pageIndex = 1
						vm.total = 0
						reslove()
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.headerBtn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.box {
			width: 160px;
			height: 30px;
			border: 1px solid #fff;
			display: flex;
			border-radius: 5px;

			.item {
				flex: 1;
				text-align: center;
				line-height: 28px;

				&.active {
					background-color: #fff;
					color: #39A6FF;
				}
			}
		}
	}


	.searchBox {
		background-color: #f5f5f5;
		padding: 10px;

		.uni-input {
			font-size: 14px;
			height: 30px;
			background-color: #fff;
			border-radius: 5px;
			text-align: center;
		}
	}

	// .listBox {
	// 	padding-top: 10px;

	// 	.item {
	// 		border-bottom: 1px solid #ebeef5;
	// 		line-height: 22px;
	// 		font-size: 16px;
	// 		display: flex;
	// 		padding: 10px 15px;
	// 		align-items: center;
	// 		justify-content: space-between;

	// 		.text {
	// 			flex: 1;
	// 			padding-right: 10px;
	// 		}

	// 		.icon {
	// 			width: auto;
	// 		}
	// 	}
	// }
	.listBox {
	padding: 0 15px;
		.item {
			border-bottom: 1px solid #ebeef5;
			padding: 10px 0px;
			.subTitle{
				line-height: 22px; color: #333;
				font-size: 16px;
				.tips{
					color: #39A6FF;
				}
			}
			.desc{
				display: flex; color: #999; padding-top: 10px;
				font-size: 12px;
				align-items: center; gap: 10px;
				justify-content: space-between;
			}
	
			&:active {
				background-color: #f5f5f5;
			}
	
			.text {
				flex: 1;
				padding-right: 10px;
			}
	
			.icon {
				width: auto;
			}
		}
	}

	.placeText {
		text-align: center;
		line-height: 40px;
		font-size: 14px;
	}
</style>